<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>我的关注-ylbnotesHub</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/mycss.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_x7u3h1yrrfc.css">
    <style>
        #table-title tr th{
            border: none;
        }
    </style>
</head>
<body>

<div th:replace="~{common/header::header(activeUrl='user')}"></div>

<main role="main" class="container">
    <div class="row">

        <aside class="col-md-3 blog-sidebar" th:fragment="userShowPanel">

            <div class="p-4 my-3 bg-white rounded shadow-sm">

                <div class="mb-0"><!--1-->
                    <p class="text-center">
                        <!--<a th:href="@{'/user/update-avatar/'+${session.loginUser.getUid()}}" class="up-avatar"></a>-->
                            <img th:src="${session.loginUser.getAvatar()}" style="border-radius: 50%;position: relative" width="80" height="80">
                    </p>
                    <br>
                    <div class="text-center">
                        <br>
                        <span th:text="${session.loginUser.getUsername()}"></span>
                        <!--<br>-->
                        <!--<small>-->
                            <!--&lt;!&ndash;<span class="badge badge-primary">普通用户</span>&ndash;&gt;-->
                            <!--<span-->
                                    <!--th:class="${session.loginUser.getRoleId()==2?'badge badge-warning':'badge badge-success'}"-->
                                    <!--th:text="${session.loginUser.getRoleId()==2?'Vip会员':'普通用户'}">-->
                            <!--</span>-->
                        <!--</small>-->
                        <br>
                        <p class="text-center">
                            <small th:text="${#strings.abbreviate(userInfo.getBrief(),25)}"></small>
                        </p>
                        <br>
                        <!--<p>-->
                            <!--<span th:each="hobby:${infoHobbys}"-->
                                  <!--th:text="${hobby}"-->
                                  <!--class="badge badge-light mr-1"></span>-->
                        <!--</p>-->
                        <p>
                        <table class="table">
                            <thead id="table-title">
                                <tr>
                                    <th scope="col">文章</th>
                                    <th scope="col">关注</th>
                                    <th scope="col">粉丝</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td th:text="${articleCount}">0</td>
                                    <td th:text="${followCount}">0</td>
                                    <td th:text="${fansCount}">0</td>
                                </tr>
                            </tbody>
                        </table>
                        </p>
                    </div>
                </div><!--1-->
                <hr>
                <div class="mb-0">
                    <div th:replace="user/index::userbtn"></div>
                </div>
            </div>

        </aside>

        <div class="col-md-9 blog-main">

            <br>
            <hr class="layui-bg-blue">

            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <div id="followcenter"   th:fragment="followcenter">
                <!--如果没有文章-->
                <div th:if="${follows.getDatas().size()<=0}">
                    <div class="media text-muted pt-3">你还没有关注别人，去发现里看一看~ &emsp;&emsp;
                    </div>
                </div>
                <!--如果有文章-->
                <div th:if="${follows.getDatas().size()>0}">
                    <div th:each="follow:${follows.getDatas()}" class="media text-muted pt-3">
                        <!-- 头像 -->
                        <img th:src="${follow.getAvatar()}" style="border-radius: 5px " width="32" height="32">

                        <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray" style="margin-left: 5px;overflow: hidden;text-overflow: ellipsis;">

                            <a th:text="${follow.getNickname()}" style="font-size: 14px"
                               th:href="@{'/article/'+${follow.getUid()}}"
                               class="text-dark font-weight-bold text-decoration-none d-block" target="_blank">
                            </a>

                            <span th:text="${follow.getBrief()!=''?follow.getBrief():'此人很懒，什么都没有写'}"
                                  class="badge u-content-tab" style="font-size: 13px">
                            </span>&emsp;

                            <a href="javascript:void(0);"
                               th:onclick="isCancenFollow([[${session.loginUser.getUid()}]],[[${follow.getUid()}]])">
                                <span class="badge float-right u-btn-del">取消关注&emsp;</span>
                            </a>
                        </p>
                    </div>

                    <!--分页-->
                    <nav aria-label="Page navigation example" class="mt-4">
                    <ul class="pagination justify-content-center pagination-sm">
                        <li th:class="${follows.getPageInfo().isHasPreviousPage()==true?'page-item':'page-item disabled'}">
                            <a class="page-link" th:href="@{'/follow/'+${session.loginUser.getUid()}+'/'+${follows.getPageInfo().pageNum -1}+'/20'}" tabindex=""><&nbsp;</a>
                        </li>
                        <li class="page-item" th:if="${follows.getPageInfo().isHasPreviousPage()}">
                            <a class="page-link" th:href="@{'/follow/'+${session.loginUser.getUid()}+'/'+${follows.getPageInfo().pageNum -1}+'/20'}" th:text="${follows.getPageInfo().pageNum -1}"></a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" th:href="@{'/follow/'+${session.loginUser.getUid()}+'/'+${follows.getPageInfo().pageNum}+'/20'}" th:text="${follows.getPageInfo().pageNum}"></a>
                        </li>
                        <li class="page-item" th:if="${follows.getPageInfo().isHasNextPage()}">
                            <a class="page-link" th:href="@{'/follow/'+${session.loginUser.getUid()}+'/'+${follows.getPageInfo().pageNum +1}+'/20'}" th:text="${follows.getPageInfo().pageNum +1}"></a>
                        </li>
                        <li th:class="${follows.getPageInfo().isHasNextPage()==true?'page-item':'page-item disabled'}">
                            <a class="page-link"  th:href="@{'/follow/'+${session.loginUser.getUid()}+'/'+${follows.getPageInfo().pageNum +1}+'/20'}" >&nbsp;></a>
                        </li>
                    </ul>
                </nav>
                </div>
                </div>

            </div>
        </div>

    </div>

    <hr class="layui-bg-blue">
</main>

<div th:replace="~{common/footer::footer}"></div>

<a class="to-top"><i class="iconfont icon-fanhuidingbu1" style="font-size:50px;color: #007bff"></i></a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/daohang.js}"></script>
<script th:src="@{/js/tips.js}"></script>

</body>
</html>